<template>
	<div class="article">
		<el-dialog :modal="false" :title="title + '文章'" :visible.sync="dialogVisible" :close-on-click-modal="false" fullscreen @closed="resetForm('form')">
			<span slot="title">
				<el-row :gutter="20" type="flex" justify="space-between">
					<el-col style="width: calc(100% - 330px)">
						<span>{{ title + '文章' }}</span>
					</el-col>
					<el-col style="margin-right: 20px; width: 330px">
						<div class="handle-btn">
							<el-button type="success" v-preventReClick @click="handlePreview()" size="mini" plain>预 览</el-button>
							<el-button type="primary" v-preventReClick @click="submitForm('form', 0)" size="mini" plain>暂 存</el-button>
							<el-button type="primary" v-preventReClick @click="submitForm('form', 1)" size="mini">发布文章</el-button>
						</div>
					</el-col>
				</el-row>
			</span>
			<div class="article-wrap">
				<el-form ref="form" :rules="rules" :model="form" label-width="80px" size="small">
					<div class="box1">
						<el-card class="box-card article-info">
							<el-row :gutter="20">
								<el-col class="articleLeft">
									<div class="article-basic">
										<el-col :span="18">
											<el-form-item label="文章标题" prop="title"><el-input v-model.trim="form.title" clearable  maxlength="50" show-word-limit></el-input></el-form-item>
										</el-col>
										<el-col :span="6" v-if="isShow">
											<el-checkbox-group v-model="titleArr">
												<el-checkbox label="1">引题</el-checkbox>
												<el-checkbox label="2">副标题</el-checkbox>
											</el-checkbox-group>
										</el-col>
										<el-col :span="18" v-show="titleArr.indexOf('1') != -1">
											<el-form-item label="引题"><el-input v-model.trim="form.citeTitle" clearable></el-input></el-form-item>
										</el-col>
										<el-col :span="18" v-show="titleArr.indexOf('2') != -1">
											<el-form-item label="副标题"><el-input v-model.trim="form.subTitle" clearable></el-input></el-form-item>
										</el-col>
										<div style="clear: both"></div>
										<el-col :span="6">
											<el-form-item label="作者" prop="author"><el-input v-model.trim="form.author" clearable></el-input></el-form-item>
										</el-col>
										<el-col :span="6" v-if="isShow">
											<el-form-item label="来源"><el-input v-model.trim="form.source" clearable></el-input></el-form-item>
										</el-col>
										<el-col :span="6" v-if="isShow">
											<el-form-item label="责任编辑"><el-input v-model.trim="form.executiveEditor" clearable></el-input></el-form-item>
										</el-col>
										<el-col :span="6" v-if="!isShow">
											<el-form-item label="分类" prop="executiveEditor">
												<el-select v-model="form.executiveEditor" placeholder="请选择">
													<el-option v-for="item in journalOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
									</div>
									<div class="article-more-content">
										<el-col :span="6" v-if="isShow">
											<el-form-item label="编辑"><el-input v-model.trim="form.editor" clearable></el-input></el-form-item>
										</el-col>
										<el-col :span="6" v-if="isShow">
											<el-form-item label="审核"><el-input v-model.trim="form.auditor" clearable></el-input></el-form-item>
										</el-col>
										<el-col :span="6" v-if="isShow">
											<el-form-item label="摄影"><el-input v-model.trim="form.photography" clearable></el-input></el-form-item>
										</el-col>
										<el-col :span="6">
											<!-- <el-form-item label="点击数">
                        <el-input-number
                          v-model="form.clickCount"
                          :min="0"
                          :max="999999"
                          size="small"
                          label="点击数"
                        ></el-input-number>
                      </el-form-item> -->
										</el-col>
										<el-col :span="18">
											<el-form-item label="摘要" clearable>
												<el-input type="textarea" :rows="4" v-model.trim="form.outline" maxlength="200" show-word-limit></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="6"><el-checkbox v-model="drawOutline" @change="handleDrawOutline">自动提取</el-checkbox></el-col>
										<el-col :span="18">
											<el-form-item label="附件"><UploadFile multiple @e-fileData="saveFile" :defaultValue="fileList" /></el-form-item>
										</el-col>
									</div>
								</el-col>
								<el-col class="cover-wrap">
									<ImgCropper
										ref="ImgCropper"
										v-if="dialogVisible"
										:props="defaultProps"
										@e-emit="setCoverImgId"
										@fatherMethod="fatherMethod"
									/>
								</el-col>
							</el-row>
						</el-card>
						<el-card style="margin-top: 10px">
							<el-row :gutter="20">
								<el-col :span="24">
									<el-form-item label="资源类型" prop="newsType">
										<el-radio-group v-model="form.newsType">
											<el-radio label="1">文章</el-radio>
											<el-radio label="2">外链</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>

								<el-col :span="24" v-if="form.newsType == 1">
									<el-row>
										<el-col :span="2"><el-button @click="showTypeset">一键排版</el-button></el-col>
										<el-col :span="22">
											<el-form-item label="正文" prop="content">
												<UEditor
													ref="ueditor"
													:ueHeight="500"
													:ueWidth="1275"
													:defaultMsg="form.content"
													:clear="dialogVisible"
													v-if="dialogVisible"
												/>
											</el-form-item>
										</el-col>
									</el-row>
								</el-col>
								<div v-else>
									<el-col :span="18">
										<el-form-item label="外链地址" prop="linkAddr">
											<el-input v-model.trim="form.linkAddr" clearable></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="6"><p class="txt-explain">链接地址必须以http://或https://开头</p></el-col>
								</div>
							</el-row>
						</el-card>
					</div>
					<div class="box2">
						<el-collapse v-model="activeNames">
							<el-collapse-item title="基本属性" name="1">
								<el-form-item label="发布时间" prop="pubDate">
									<el-date-picker
										v-model="form.pubDate"
										type="date"
										value-format="yyyy-MM-dd"
										:clearable="false"
										style="width: 100%"
										placeholder="选择发布时间"
									></el-date-picker>
								</el-form-item>
								<!-- <el-form-item label="排序">
									<el-input-number v-model="form.orderBy" :min="1" :max="1000" size="small" label="排序"></el-input-number>
								</el-form-item> -->
								<el-form-item label="点击数">
									<el-input-number v-model="form.clickCount" :min="0" :max="999999" size="small" label="点击数"></el-input-number>
								</el-form-item>
							</el-collapse-item>
							<!-- <el-collapse-item title="其他设置" name="2">
                <div>控制反互动效让用户可以清晰的感知自己的操作；</div>
              </el-collapse-item> -->
						</el-collapse>
					</div>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import moment from 'moment';
import userInfo from '@/mixins/userInfo.js';
import { mapGetters } from 'vuex';
export default {
	mixins: [userInfo],
	components: {
		ImgCropper: () => import('@/components/imgCropper'),
		UploadFile: () => import('@/components/uploadFile/index.vue')
	},
	data() {
		return {
			activeNames: ['1'],
			title: '新增',
			dialogVisible: false,
			titleArr: [],
			articleMore: true,
			drawOutline: false,
			isShow: true,
			form: {
				title: '', //标题
				subTitle: '', //副标题
				citeTitle: '', //副标题
				// status: '1', //状态0-发布，1-未发布
				status: '0', //状态;0-未发布，1-已发布
				auditStatus: '0', //审核状态;0-暂存，1-待审核，2-审核通过，3-不通过
				author: '', //作者
				editor: '', //编辑
				photography: '', //摄影
				auditor: '', //审核
				executiveEditor: '', //责编
				clickCount: '0', //点击数
				content: '', //内容
				source: '', //来源
				pubDate: '', //发布时间
				outline: '', //概要
				fileIds: [], //附件id数组
				orderBy: 10,
				coverPicture: '', //封面图
				newsType: '1', //1.文章 2.外链
				linkAddr: '', //外链地址
				classifyIds: [],
				columnIds: [],
				type1: 1 //1.文章  2.书籍
			},
			journalOptions: [], //分类数组
			rules: {
				title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
				author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
				pubDate: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
				newsType: [{ required: true, message: '请选择资源类型', trigger: 'blur' }],
				content: [{ required: true, message: '请输入正文', trigger: 'blur' }],
				linkAddr: [{ required: true, message: '请输入外链地址', trigger: 'blur' }]
			},
			props: {
				children: 'childList',
				label: 'name',
				value: 'id',
				expandTrigger: 'click',
				emitPath: false,
				multiple: true,
				checkStrictly: true,
				disabled: 'disable'
			},
			fileList: [], //返回附件信息
			defaultProps: {
				defaultValue: null,
				type: 1, //1. 文章封面 2. 书籍封面
				button: ['upload', 'fromArticle', 'fromNetDisk', 'cancel']
			}
		};
	},
	props: ['columnId'],
	computed: mapGetters(['columnData']),
	mounted() {
		//this.elDatePicker = this.form['pubDate'] = moment().format('YYYY-MM-DD');
		this.$bus.$on('showDialogNewsContentsAdd', this.init);
	},
	beforeDestroy() {
		this.$bus.$off('showDialogNewsContentsAdd');
	},
	methods: {
		//显示弹窗
		init(row) {
			if (row.columnNames === '通知公告') {
				this.isShow = false;
				this.getClassify();
			} else {
				this.isShow = true;
			}
			this.titleArr = [];
			this.drawOutline = false;
			this.defaultProps.defaultValue = null;
			this.fileList = [];
			this.form = this.$options.data().form;
			if (Object.keys(row).length > 1) {
				this.form = { ...this.form, ...row };
				this.$set(this.form, 'id', row.id);
				this.titleArr = [this.form.subTitle ? '1' : '', this.form.outline ? '2' : ''];
				this.form.pubDate = moment(this.form.pubDate).format('YYYY-MM-DD');
				this.form.content = this.form.content.replace('div', 'p');
				this.defaultProps.defaultValue = row.httpUrl || null;
				this.fileList = row.fileList || [];
				this.form.fileIds = this.fileList.map((v) => v.id);
			} else {
				this.form.columnIds = [this.columnId];
				this.form.classifyIds = [this.columnId];
				this.form.author = this.username;
				this.form.pubDate = moment().format('YYYY-MM-DD');
				this.$delete(this.form, 'id');
			}
			this.title = row.id ? '编辑' : '新增';
			this.dialogVisible = true;
		},
		submitForm(form, status) {
			this.form.status = status;
			this.form.auditStatus = 2;
			this.form.citeTitle = this.titleArr.indexOf('1') != -1 ? this.form.citeTitle : '';
			this.form.subTitle = this.titleArr.indexOf('2') != -1 ? this.form.subTitle : '';
			this.form.pubDate = moment(this.form.pubDate).format('YYYY-MM-DD');
			if (this.form.newsType == 1) {
				this.form.linkAddr = '';
				this.form.content = this.$refs.ueditor.message;
			} else {
				this.form.content = '';
			}
			this.$refs[form].validate(async (valid) => {
				if (valid) {
					let dispatchType = this.title == '新增' ? 'addNewsContents' : 'updateNewsContents';
					let res = await this.$store.dispatch(dispatchType, this.form);
					this.done();
					// auditStatus == 0 ? this.done() : this.flowSubmit(res.data[0])
				}
			});
		},
		done() {
			this.dialogVisible = false;
			this.$bus.$emit('refreshNewsContentsList');
			this.$message({
				message: '操作成功',
				type: 'success'
			});
		},
		//提交审核
		async flowSubmit(row) {
			let obj = {
				businessData: JSON.stringify(row), //业务数据 json字符串
				businessKey: row.id, //资源id
				definitionCode: 2, //1.书籍审核 2.新闻审核
				scope: 1
			};
			await this.$store.dispatch('submitFlowApi', obj);
			this.done();
		},
		//获取分类
		async getClassify() {
			let listQuery = {
				page: 1,
				limit: 9999,
				pid: 0,
				classType: '1',
				createBy: '1',
				status: '1'
			};
			let res = await this.$store.dispatch('sysClassifyList', listQuery);
			this.journalOptions = res.data;
		},
		resetForm(form) {
			this.$refs[form].resetFields();
		},
		saveFile(v) {
			this.form.fileIds = [];
			this.form.fileIds = v.map((item) => item.id);
		},
		setCoverImgId(v) {
			// 上传的图片传文件id，否则传图片地址
			if (typeof v === 'object') {
				this.form.coverPicture = v.id;
			} else {
				this.form.coverPicture = v;
			}
		},
		//提取摘要
		handleDrawOutline(v) {
			if (v) {
				let str = this.$refs.ueditor.message;
				this.form.outline = this.removeHtmlTab(str)
					.replace(/\&nbsp\;/g, '')
					.slice(0, 200);
			} else {
				this.form.outline = '';
			}
		},
		//获取正文
		fatherMethod() {
			let content = this.$refs.ueditor.message;
			this.$refs.ImgCropper.getContent(content);
		},
		//预览
		handlePreview() {
			if (this.form.newsType == 1) {
				this.form.content = this.$refs.ueditor.message;
				if (!this.form.title || !this.form.content) {
					this.warnMsg('标题和正文不能为空');
					return;
				}
				this.$bus.$emit('collectLogPreview', this.form);
			} else {
				let urlReg = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/;
				if (urlReg.test(this.form.linkAddr)) {
					window.open(this.form.linkAddr);
				} else {
					this.warnMsg('请输入正确的网站地址');
				}
			}
		},
		//展示一键排版弹窗
		showTypeset() {
			console.log(this.$refs.ueditor.showDialog());
		}
	}
};
</script>
<style scoped lang="scss">
.article-wrap {
	position: relative;
	.articleLeft {
		width: calc(100% - 230px);
	}
	.box1 {
		width: calc(100% - 350px);
	}
	.box2 {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 330px;
		// height: 800px;
		background: #fff;
		padding: 10px 20px;
		box-sizing: border-box;
	}
}
.article-info {
	position: relative;
	.article-more-btn {
		position: absolute;
		right: -27px;
		bottom: -27px;
		cursor: pointer;
		width: 100px;
		height: 60px;
		background: #1a9c03;
		color: #fff;
		text-align: center;
		transform: rotate(-35deg);
	}
	.cover-wrap {
		position: relative;
		width: 210px;
	}
	.article-more-content {
		clear: both;
	}
}
</style>
<style scoped>
.article >>> .el-dialog {
	background: #aaa;
}
.article >>> .el-dialog__header {
	padding: 10px 20px;
	background: #fff;
}
.article >>> .el-dialog__header .el-dialog__headerbtn {
	top: 14px;
	padding: 4px 5px;
	border-radius: 3px;
	background: #930b0b;
}
.article >>> .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
	color: #fff;
	display: block;
}
.article >>> .el-dialog__body {
	padding: 10px 20px;
	max-height: unset;
	border-top: 1px solid #ddd;
}
.cover-wrap >>> .cover-img {
	right: 50px;
}
</style>
